<script setup>
import PageSection from './PageSection.vue'
import { CORE_TECH_COUNT, PARTNERS_COUNT, QUALIFICATION_COUNT, RANK } from '~/constants'
import { getCompany } from '~/service'

defineProps({
  active: Boolean,
})
const { locale, isCN } = useLocale()
refreshNuxtData()
const { resolveImgURL } = useGlobalStore()
const store = useGlobalStore()
const { company } = storeToRefs(store)
</script>

<template>
  <PageSection :active :title="$t('menu.about_us')" title-en="About Us" more-path="/about">
    <div relative h="full">
      <div v-show="active" class="animate-fade-in-left max-md:hidden home-animate" pl="[200px]" text="[18px]" :class="isCN ? ['mt-[154px]'] : ['mt-[60px]']">
        <h1
          text="[46px]"
          class="font-sans before:mb-[12px] before:block before:h-[4px] before:w-[32px] before:bg-[var(--primary-color)] before:content-['']"
        >
          {{ get(company, 'name', locale) }}
        </h1>
        <div class="max-w-[580px]" :class="isCN ? ['leading-36px mt-[42px]'] : ['leading-30px mt-[32px]']" text="[var(--color-text-secondary)] [18px]" v-html="get(company, 'introduction', locale)">
        </div>

        <p flex="~" mt="[64px]" text="[var(--color-text-secondary)]" class="items-center">
          <NuxtLink to="/about" m="r-[12px]">
            {{ $t('link.learn_more') }}
          </NuxtLink>
          <img src="~/assets/img/icon_arrow_right.png" class="h-[20px] w-[20px]" />
        </p>
      </div>

      <div
        v-show="active"
        class="absolute right-0 top-0 flex flex-col animate-fade-in-right items-center max-md:hidden home-animate"
      >
        <img :src="resolveImgURL(company?.logo3_url)" class="logo mb-[38px] h-[372px]" alt="" srcset="" />
        <ul class="honor items-center justify-between" flex="~" py="32px" px="10px">
          <li :class="isCN ? 'px-[32px]' : 'px-[20px]'" class="animate-delay-200!">
            <div class="mb-[16px] flex items-end">
              <template v-if="locale === 'zh'">
                <div class="value mr-[10px] mb-0!" style="color:rgb(207, 63, 54);">
                  <NumberAnimation :from="0" :to="company.rank_desc || RANK" />
                </div>
                <div class="leading-[26px]">
                  {{ $t('label.top') }}
                </div>
              </template>
              <template v-else>
                <div class="leading-[26px]">
                  {{ $t('label.top') }}
                </div>
                <div class="value mr-[10px] mb-0!" style="color:rgb(207, 63, 54);">
                  <NumberAnimation :from="0" :to="RANK" />
                </div>
              </template>
            </div>
            <div>{{ $t('home.fj_company') }}</div>
          </li>
          <li :class="isCN ? 'px-[32px]' : 'px-[20px]'" class="animate-delay-400!">
            <div class="value" style="color:rgb(207, 63, 54);">
              {{ company.partners_desc || PARTNERS_COUNT }}+
            </div>
            <div>{{ $t('home.partners') }}</div>
          </li>
          <li :class="isCN ? 'px-[32px]' : 'px-[20px]'" class="animate-delay-500!">
            <div class="value" style="color:rgb(207, 63, 54);">
              {{ company.patent_qualifications_desc || QUALIFICATION_COUNT }}+
            </div>
            <div>{{ $t('home.patents') }}</div>
          </li>
          <li :class="isCN ? 'px-[32px]' : 'px-[20px]'" class="animate-delay-600!">
            <div class="value" style="color:rgb(207, 63, 54);">
              {{ company.core_technology_desc || CORE_TECH_COUNT }}+
            </div>
            <div>{{ $t('home.technologies') }}</div>
          </li>
        </ul>
      </div>

      <div class="hidden max-md:block">
        <div class="flex justify-center max-md:mt-[10px]">
          <img :src="resolveImgURL(company?.logo3_url)" class="logo max-md:h-[220px]" alt="" srcset="" />
        </div>

        <div v-show="active" class="animate-fade-in-left home-animate" mt="[154px] max-md:[36px]" pl="[200px] max-md:[0]" text="[18px]">
          <h1
            text="max-md:[20px]"
            class="font-500 font-sans before:block before:bg-[var(--primary-color)] before:content-[''] before:max-md:mb-[12px] before:max-md:h-[4px] before:max-md:w-[32px]"
          >
            {{ get(company, 'name', locale) }}
          </h1>
          <div mt="max-md:[16px]" leading="max-md:[30px]" text="[var(--color-text-secondary)] max-md:[16px] " v-html="get(company, 'introduction', locale)">
          </div>
          <p flex="~" mt="max-md:14px" text="[var(--color-text-secondary)] max-md:[16px]" class="items-center">
            <NuxtLink to="/about" m="r-[12px]">
              {{ $t('link.learn_more') }}
            </NuxtLink>
            <img src="~/assets/img/icon_arrow_right.png" class="h-[20px] h-auto w-[20px] max-md:w-[16px]" />
          </p>
        </div>
      </div>
    </div>
  </PageSection>
</template>

<style scoped lang="postcss">
.honor {
  /* background: linear-gradient(
    86deg,
    #0083ff19 0%,
    #0083ff19 87%,
    rgba(0, 131, 255, 0) 100%
  ); */

  > li {
    display: flex;
    flex-direction: column;
    align-items: center;
    @apply home-animate animate-fade-in-up opacity-0;
  }

  .value {
    margin-bottom: 16px;
    font-size: 56px;
    line-height: 60px;
    font-weight: 600;
    color: var(--color-text-primary);
  }
}

.logo {
  --offerset: -24px;
  --offerset1: calc(0px - var(--offerset));
  margin-left: var(--offerset1);
  animation: wander 5s ease-in-out infinite;
}

@keyframes wander {
  from {
    transform: translate(var(--offerset), var(--offerset));
  }
  50% {
    transform: translate(var(--offerset1), var(--offerset1));
  }
  to {
    transform: translate(var(--offerset), var(--offerset));
  }
}
</style>
